<template>
  <!-- 带温度和时间的 公用阶段下发编辑 -->
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="下发"
    :append-to-body="true"
    :visible="stageVisible"
    custom-class="stage_dialog"
    width="80%"
    @close="close"
  >
    <div style="margin-bottom: 10px;" class="flex-x">
      <el-popover
        popper-class="preview_popover"
        @show="showPreChart"
        placement="left"
        width="400"
      >
        <PreviewChart
          ref="previewChartRef"
          :chartData="form.tableData"
          :dataKey="dataKey"
        ></PreviewChart>
        <el-button icon="el-icon-view" slot="reference" size="small"
          >预览工艺曲线</el-button
        >
      </el-popover>
      <!-- <el-radio v-model="doubleTooling" label="双层工装"></el-radio> -->
      <div style="margin-left: 20px;" v-if="isIssued">
        <span style="margin-right: 10px;">
          双层工装:
        </span>
        <el-radio-group v-model="doubleToolingRadio">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </div>
    </div>

    <el-form
      class="iss_form"
      :model="form"
      ref="formName"
      :inline="false"
      size="normal"
    >
      <el-table
        style="margin-top: 10px"
        :data="form.tableData"
        border
        size="mini"
        v-if="_formulaInfo && _formulaInfo.length"
      >
        <!-- <el-table-column type="index" align="center"> </el-table-column> -->
        <el-table-column
          :prop="item.key"
          :label="item.label"
          align="center"
          min-width="180"
          v-for="item in _formulaInfo.filter(f => !f.hide)"
          :key="item.label"
          ><template slot-scope="scope">
            <span v-if="item.key == 'stageId'">
              {{ scope.$index + 1 }}
            </span>
            <!-- 注意: 需要填写的字段中 第0,1个是固定的 但是label不一样 -->
            <!-- 设定温度的输入提示  -->
            <span v-else-if="item.label == setTemp">
              <el-tag
                size="mini"
                v-if="
                  scope.row[formulaRules.UP_TEMP] &&
                    scope.row[formulaRules.DOW_TEMP]
                "
              >
                <span class="el-icon-message-solid"> </span>
                请输入{{ scope.row[formulaRules.DOW_TEMP] }}℃ -
                {{ scope.row[formulaRules.UP_TEMP] }}℃</el-tag
              >
            </span>
            <!-- 设定时间的输入提示 -->
            <span v-else-if="item.label == setTime">
              <el-tag
                size="mini"
                v-if="
                  scope.row[formulaRules.UP_HEAT_TIME_ZK] &&
                    scope.row[formulaRules.DOW_HEAT_TIME_ZK]
                "
              >
                <span class="el-icon-message-solid"> </span>
                请输入{{ scope.row[formulaRules.DOW_HEAT_TIME_ZK] }}min -
                {{ scope.row[formulaRules.UP_HEAT_TIME_ZK] }}min</el-tag
              >
              <el-tag
                size="mini"
                v-else-if="
                  scope.row[formulaRules.UP_TIME] &&
                    scope.row[formulaRules.DOW_TIME]
                "
              >
                <span class="el-icon-message-solid"> </span>
                请输入{{ scope.row[formulaRules.DOW_TIME] }}min -
                {{ scope.row[formulaRules.UP_TIME] }}min</el-tag
              >
            </span>

            <el-form-item
              :prop="`tableData.${scope.$index}.${item.key}`"
              :rules="renderRules(item, scope.row)"
              label=""
            >
              <el-input
                v-if="item.type == 'input'"
                v-model="scope.row[item.key]"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
              <el-radio-group
                v-model="scope.row[item.key]"
                v-else-if="item.type == 'radio'"
              >
                <el-radio
                  :label="radio.value"
                  v-for="radio in item.options"
                  :key="radio.value"
                  >{{ radio.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </template>
        </el-table-column>
        <!-- 此处使用 template 不要用div 不然会出现列错乱问题 -->
        <template v-if="isIssued">
          <el-table-column
            v-for="(item, index) in formulaParameter"
            :key="index"
            :prop="item.key"
            :label="item.label"
            align="center"
            width="150px"
          >
            <template slot-scope="scope">
              {{ scope.row[item.key] }}
            </template>
          </el-table-column>
        </template>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          v-if="!isIssued"
        >
          <template slot="header">
            <div class="flex-x">
              <div style="margin-right: 10px">操作</div>
              <el-button type="primary" size="small" @click="addFormula"
                >添加</el-button
              >
            </div>
          </template>
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="del(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <span slot="footer">
      <el-button
        type="primary"
        :loading="stageBtnloading"
        @click="submit"
        size="small"
        >{{ isIssued ? "确认下发" : "确认修改" }}</el-button
      >
      <el-button @click="close" size="small"> 取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import { formulaRules } from "@/views/centralizedControl/deviceOperation/constant";
import PreviewChart from "../../components/PreviewChart.vue";
export default {
  components: {
    PreviewChart
  },
  props: {
    dataKey: {
      type: Array,
      default: () => {
        return ["oneExpandInfo", "twoExpandInfo"];
      }
    },
    // 表格内的表单
    form: {
      type: Object,
      default: () => {
        return {
          tableData: []
        };
      }
    },
    // 是否是下发按钮
    isIssued: {
      type: Boolean,
      default: false
    },
    // 是否显示
    stageVisible: {
      type: Boolean,
      default: false
    },
    // 按钮的loading
    stageBtnloading: {
      type: Boolean,
      default: false
    },
    // 原始配方
    formulaParameter: {
      type: Array,
      default: () => []
    },
    // 定制化炉子 需要填写的字段
    _formulaInfo: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    // 设定温度的label
    setTemp() {
      return this._formulaInfo.length ? this._formulaInfo[0].label : "";
    },
    // 设定时间的label
    setTime() {
      return this._formulaInfo.length ? this._formulaInfo[1].label : "";
    },
    // 从原始配方中取出 需要用到的校验字段
    formulaRules() {
      return formulaRules;
    },
    // 生成校验规则
    renderRules() {
      let that = this;
      return function(item, row) {
        return [
          {
            required: true,
            message: `${item.label}不能为空`,
            trigger: "blur"
          },
          {
            validator(rule, value, callback) {
              // 设定温度的校验规则
              // 设定时间的校验规则
              if (item.label == that.setTime) {
                that.validatorFormTime(rule, value, callback, row);
              } else if (item.label == that.setTemp) {
                that.validatorFormTemp(rule, value, callback, row);
              } else {
                () => {
                  callback();
                };
              }
            },
            trigger: "blur"
          }
        ];
      };
    },
    // 温度的校验规则
    validatorFormTemp() {
      let that = this;
      return function(rule, value, callback, row) {
        // 上限500 下限400  只能输入500 - 400之前
        // value  当前输入的值
        if (value) {
          if (isNaN(value)) {
            return callback(new Error("请输入数字"));
          }
        }
        // 自定义下发 不需要继续往后校验
        if (!that.isIssued) {
          callback();
        }
        if (!row[formulaRules.UP_TEMP] && !row[formulaRules.DOW_TEMP]) {
          callback();
        }

        const shang = row[formulaRules.UP_TEMP];
        const xia = row[formulaRules.DOW_TEMP];
        if (shang && xia) {
          if (value > Number(shang) || value < Number(xia)) {
            callback(new Error(`${that.setTemp}必须输入${xia} - ${shang}`));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
    },
    // 时间的校验规则
    validatorFormTime() {
      let that = this;
      return function(rule, value, callback, row) {
        // value  当前输入的值
        if (value) {
          if (isNaN(value)) {
            return callback(new Error("请输入数字"));
          }
        }

        // 自定义下发 不需要继续往后校验
        if (!that.isIssued) {
          callback();
        }
        console.log("是否是双层工装. :>> ", this.doubleToolingRadio);
        if (this.doubleToolingRadio) {
          callback();
        }
        const shang = row[formulaRules.UP_TIME];
        const xia = row[formulaRules.DOW_TIME];
        const shang2 = row[formulaRules.UP_HEAT_TIME_ZK];
        const xia2 = row[formulaRules.DOW_HEAT_TIME_ZK];
        if (!shang && !xia && !shang2 && !xia2) {
          callback();
        }
        if (shang2 && xia2) {
          if (value > Number(shang2) || value < Number(xia2)) {
            callback(new Error(`${that.setTime}必须输入${xia2} - ${shang2}`));
          } else {
            callback();
          }
        }
        if (shang && xia) {
          if (value > Number(shang) || value < Number(xia)) {
            callback(new Error(`${that.setTime}必须输入${xia} - ${shang}`));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
    },
    ...mapGetters(["controlDeviceInfo"])
    // _formulaInfo() {
    //   return VACUUM_FORMULA_INFO_Z2;
    // }
  },

  data() {
    return {
      // formulaParameter: [],
      doubleToolingRadio: 1
    };
  },
  watch: {},
  mounted() {
    // 获取任务下发弹框列表
    // this.getTaskDownLoadInfos();
  },
  methods: {
    // 监听预览弹框显示
    showPreChart() {
      this.$nextTick(() => {
        this.$refs.previewChartRef.init();
      });
    },
    // 删除阶段
    del(index) {
      // this.formulaParameter.splice(index, 1);
      this.$emit("del", index);
    },
    submit() {
      console.log("123213 :>> ", 123);

      this.$refs["formName"].validate(valid => {
        console.log("123213 :>> ", valid);
        if (valid) {
          this.$emit("submit");
        }
      });
      // this.$refs["formName"].validate(valid => {
      //   if (valid) {
      //     this.$emit("submit");
      //   } else {
      //   }
      // });
    },
    addFormula() {
      this.$emit("addFormula");
    },
    close() {
      this.$emit("update:stageVisible", false);
    }
  }
};
</script>

<style lang="scss">
.stage_dialog {
  .el-radio {
    margin-right: 10px;
  }
}
</style>
